<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的消息</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
	</head>
	<body>
		<div class="mui-content">
			<div id="rfcnewslst" class="mui-scroll-wrapper" style="height: 92%; top: 1px;">
				<div class="mui-scroll">
					<div id="dvnewslst" style="margin: 10px 8px 10px 8px;">
						<!--<div style="display: flex;">
							<div style="margin-top: 4px;">
								<img src="../../img/index/myicon_03.png" style="width: 50px;" />
							</div>
							<div style="margin-left: 14px;">
								<span style="display: block; color: #616161; font-size: 14px;">消息标题</span>
								<span style="display: block; color: #909090; font-size: 12px;">消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内</span>
								<span style="display: block; float: right; color: #909090; font-size: 11px; margin-right: 10px;">2017-11-11</span>
							</div>
						</div>
						<hr style="width: 100%; height: 1px; background-color: #F1F1F1; margin-top: 5px;" />
						-->
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/bus/request.js"></script>
	<script src="../../js/bus/utils.js"></script>
	<script>
		var $currpage = 0;
		mui.init({
			pullRefresh: {
				container: "#rfcnewslst",
				up: {
					height: 10,
					auto: true,
					deceleration: 0.0006 ,
					contentrefresh : "加载中...",
					contentnomore:'没有更多数据了',
					callback: loadnewsLstDat
				}
			}
		});
		
		function loadnewsLstDat(){
			getNewsLstDat(9, $currpage);
		}
		
		function getNewsLstDat($size, $page){
			var $newsDat = {"code":"0","message":"success","result":[{"nid":1,"title":"系统消息","content":"欢迎加入我们的大家庭...","time":"2017-01-07"},{"nid":1,"title":"点赞消息","content":"你的好友小辣椒点赞了你的日记啦...","time":"2017-01-08"},{"nid":1,"title":"咨询消息","content":"你有3条消息还未读取楠，赶快去读取吧...","time":"2017-01-09"}]}; 
			$newsDat = JSON.stringify($newsDat);
			$newsDat = JSON.parse($newsDat);
			var $newsLstDoc = document.getElementById("dvnewslst");
			$currpage ++;
			if($currpage > 1){
				mui("#rfcnewslst").pullRefresh().endPullupToRefresh(true);
			} else {
				for (var i = 0; i < $newsDat.result.length; i ++) {
					var $newsdiv = document.createElement("div");
					$newsdiv.innerHTML = newsLstTem($newsDat.result[i], i);
					$newsLstDoc.appendChild($newsdiv);
				}
				mui("#rfcnewslst").pullRefresh().endPullupToRefresh(false);
			}
		}
		
		function newsLstTem($info, $num){
			var $newsHtmlTem = 
			'<div style="display: flex; margin-top:10px;">'
			+	'<div style="margin-top: 2px; width:15%;">'
			+		'<img src="../../img/grzx/new/touxiang_06.png" style="width: 50px;" />'
			+	'</div>' 
			+	'<div style="margin-left: 14px; width:85%;">'
			+		'<span style="display: block; color: #616161; font-size: 14px;">'+ $info.title +'</span>'
			+		'<span style="display: block; color: #909090; font-size: 12px;">'+ $info.content +'</span>'
			+		'<span style="display: block; float: right; color: #909090; font-size: 11px; margin-right: 10px;">'+ $info.time +'</span>'
			+	'</div>'
			+'</div>'
			+'<hr style="width: 100%; height: 1px; background-color: #F1F1F1; margin-top: 5px;" />';
			return $newsHtmlTem;
		}
	</script>
</html>
